
<template name="navTip">
    <view :class="cmsConfig.Common.IsWxNative ? 'navTipNative' : 'navTip'" >
			<block v-if="cmsConfig.isJustOcr || cmsConfig.isJustSms">
				<view class="navText navActive" v-if="curPage === 'sms' && cmsConfig.isJustSms">{{navTitle.smsTitle}}</view>
      	<view class="navText navActive" v-if="curPage === 'ocr' && cmsConfig.isJustOcr">{{navTitle.ocrTitle}}</view>
			</block>
			<block v-else>
				<block v-if="!cmsConfig.isHideSmsPage">
					<view class="navText" :class="{'navActive':curPage === 'sms'}" >{{navTitle.smsTitle}}</view>
					<view class="navLine" ></view>
				</block>
				<block v-if="!cmsConfig.isHideOcrPage">
					<view class="navText" :class="{'navActive':curPage === 'ocr'}" >{{navTitle.ocrTitle}}</view>
					<view class="navLine" ></view>
				</block>
				<view class="navText" :class="{'navActive':curPage === 'verifyLivingBody'}">{{navTitle.livingbodyTitle}}</view>
				<view class="navLine" ></view>
				<view class="navText" :class="{'navActive':curPage === 'result'}">{{navTitle.resultTitle}}</view>
			</block>
    </view>
</template> 

<script>
	export default {
		name:'navTips',
		props: {
		},
		data() {
			return {
				cmsConfig: uni.faceidVerifySdkCmsConfig,
				navTitle: uni.faceidVerifySdkNavTitle,
				curPage: uni.faceidVerifySdkCurPage
			}
		},
		components:{
			
		},
		onLoad() {
			console.log('navtipcmsConfig',this.cmsConfig)
			this.cmsConfig = uni.faceidVerifySdkCmsConfig ;
			this.navTitle = uni.faceidVerifySdkNavTitle ;
			this.curPage = uni.faceidVerifySdkCurPage ;
		}
	}
</script>

<style scoped>

.navTip {
  display:flex;
  align-items: center;
  flex-direction: row;
  padding:38rpx;
  font-size: 32rpx;
  background-color:#F4F4F4;
  /* border-bottom:.5px solid #ccc; */
}

.navTipNative {
  display:flex;
  align-items: center;
  flex-direction: row;
  padding:38rpx;
  font-size: 32rpx;
  background-color:#F4F4F4;
  /* border-bottom:.5px solid #ccc; */
}

.navTipNative .navActive {
  color: #04be02 
}
.navText {
  color:#888;
  font-size:12px;
}

.navActive {
  color: #0079ff;
}

.navLine {
  flex:1;
  width:auto;
  height:5px;
  /* margin: 0 10px; */
  background:url("//faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/result-line-s.png") no-repeat center 0;
  background-size:contain;
  vertical-align:middle;
}

</style>
